<template>
  <div class="container">
    <div v-for="(zone, index) in zones" :key="index">
      <div class="zone">
        <h2>{{ zone.name }}</h2>
      </div>
      <div
        v-for="(section, sectionIndex) in zone.sectionList"
        :key="sectionIndex"
      >
        <div class="section">
          <div class="section-title">
            {{ section.sectionName }} 主题板块
          </div>
          <div class="dashed-line"></div>
          <div class="section-content">
            <el-avatar shape="square" :size="200" :fit="fit" :src="section.img" @click="handleSection(section.sectionId)"/>
            <div  class="post-list" v-if="section.postList[0].postId!=null">
              <div v-for="(post, postIndex) in section.postList.slice().sort((a, b) => b.support - a.support).slice(0, 4)" :key="postIndex">
                <div class="post-item" @click="postPage(post.postId)">
                  {{ post.title }}  
                  点赞量:{{ post.support }}
                </div>
                
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script setup>

import { onMounted, reactive } from "vue";
import axios from "axios";
import { useRoute,useRouter } from "vue-router";
import { userConfig } from "@/config/config";

const router=useRouter()
let data = [];
let zones = reactive([]);
// let userConfig = {
//   headers: {
//     token: "token",
//   },}

onMounted(() => {
  


  axios.post("api/zone/allZone",{},userConfig).then(function (response) {
    data = response.data;
    zones.length = 0; // 清空数组
    zones.push(...response.data.data); // 将数据添加到 zones 中

    console.log(zones[0]);
  });
});

function postPage(postId) {
  router.push({
    name:"PostPage",
    query:{
      post:postId
    }
  })
}
function handleSection(sectionId){
  router.push({
    name:"SectionPage",
    query:{
      section:sectionId
    }
  })
}



</script>
  
<style scoped>
.container {
  background-color: #f0f5ff; /* 淡蓝色背景，营造二次元氛围 */
  padding: 20px;
}

.zone {
  background-color: #e0e9ff; /* 更浅的蓝色区域背景 */
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border: 2px solid #73a6ff; /* 蓝色边框 */
}

.zone h2 {
  color: #3f51b5; /* 深蓝色标题文字 */
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.section {
  background-color: #ffffff; /* 白色板块背景 */
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border: 2px solid #ff9800; /* 橙色边框 */
}

.section-title {
  font-size: 1.2em;
  color: #ff4081; /* 粉色标题文字 */
  margin-bottom: 5px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.dashed-line {
  border-top: 2px dashed #ccc; /* 虚线分隔线 */
  margin: 10px 0;
}

.section-content {
  display: flex;
  gap: 15px;
}

.post-list {
  flex: 1;
}

.post-item {
  color: #673ab7; /* 紫色帖子标题文字 */
  cursor: pointer;
  margin-bottom: 8px;
  padding: 5px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.post-item:hover {
  background-color: #fce4ec; /* 淡粉色悬停背景 */
}
</style>    